import React, {Component, Fragment} from 'react'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
import './style.css'

class App extends Component {
    constructor(r) {
        super(r);
        this.state = {
            show: true,
            list: []
        }
        this.handleT = this.handleT.bind(this)
        this.handleAdd = this.handleAdd.bind(this)
    }

    handleT() {
        this.setState(() => {
            return {show: !this.state.show}
        })
    }

    handleAdd() {
        this.setState((pre) => {
            return {list: [...pre.list, 'item']}
        })
    }

    render() {
        return (
            <Fragment>
                <div className={this.state.show ? 'show' : 'hide'}>hello</div>
                <button onClick={this.handleT}>toggle</button>
                <CSSTransition
                    in={this.state.show}
                    timeout={1000}
                    classNames='fade'
                    unmountOnExit
                    onEntered={(el) => {
                        el.style.color = 'green'
                    }}
                    appear={true}
                >
                    <div>csstransition</div>
                </CSSTransition>
                <hr/>
                <TransitionGroup>
                    {
                        this.state.list.map((item, ind) => {
                            return (
                                <CSSTransition
                                    timeout={1000}
                                    classNames='fade'
                                    unmountOnExit
                                    onEntered={(el) => {
                                        el.style.color = 'green'
                                    }}
                                    appear={true}
                                    key={ind}
                                >
                                    <div>{item}</div>
                                </CSSTransition>
                            )
                        })
                    }
                </TransitionGroup>
                <button onClick={this.handleAdd}>click_to_add</button>
            </Fragment>
        )
    }
}

export default App
